<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>货架管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .is-selected {
            color: #1989FA;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="demo-input-size">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="货架编号">
                <el-input v-model="formInline.shelvesNo" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-input v-model="formInline.creatTime" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <br>

    <el-button type="primary" @click="openEdit">新增货架</el-button>
    <!--数据表格-->
    <el-table
            ref="shelvesTable"
            :data="tableData"
            style="width: 100%">
        <el-table-column label="货架id">
            <template slot-scope="scope">
                <span >{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="货位编号">
            <template slot-scope="scope">
                <span >{{ scope.row.shelvesNo }}</span>
            </template>
        </el-table-column>
        <el-table-column label="所属货区">
            <template slot-scope="scope">
                <span >{{ scope.row.goodsName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="货区编号">
            <template slot-scope="scope">
                <span >{{ scope.row.damId }}</span>
            </template>
        </el-table-column>
        <el-table-column label="负责人">
            <template slot-scope="scope">
                <span >{{ scope.row.person }}</span>
            </template>
        </el-table-column>
        <el-table-column label="联系电话">
            <template slot-scope="scope">
                <span >{{ scope.row.telephone }}</span>
            </template>
        </el-table-column>
        <el-table-column label="主要商品">
            <template slot-scope="scope">
                <span >{{ scope.row.mainProduct }}</span>
            </template>
        </el-table-column>
        <el-table-column label="创建时间">
            <template slot-scope="scope">
                <span >{{ scope.row.creatTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="状态">
            < <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" v-if="scope.row.status==0" @click="confirmStorage(scope.$index,scope.row)"></el-button>
            <el-button type="info" icon="el-icon-check" disabled  v-if="scope.row.status==1" ></el-button>
        </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    </el-table>
    <!--分页-->
    <nav style="text-align: center">  <!-- 分页居中放置-->
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="loadPage"
                :total="total"
                :current-page="current"
                :page-size="pageSize">
        </el-pagination>
    </nav>

    <!--保存；添加货架的的对话框-->
    <el-dialog title="新建货架" :visible.sync="dialogFormVisible" @close="closeMyDialog">

        <el-form :model="shelves">
            <el-form-item label="货架编号" :label-width="formLabelWidth">
                <el-input v-model="shelves.shelvesNo" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="shelves">
            <!--<el-form-item label="所属货区" :label-width="formLabelWidth">
                <el-input v-model="shelves.goodsName" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-select v-model="shelves.id" placeholder="所属货区">
                <el-option
                        v-for="shelvesHouse in options"
                        :label="shelvesHouse.goodsName"
                        :value="shelvesHouse.id">
                </el-option>
            </el-select>
        </el-form>
        <el-form :model="shelves">
            <!--<el-form-item label="货区编号" :label-width="formLabelWidth">
                <el-input v-model="shelves.damId" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-select v-model="shelves.damId" placeholder="货区编号">
                <el-option
                        v-for="shelvesHouse1 in options1"
                        :label="shelvesHouse1.goodsNo"
                        :value="shelvesHouse1.damId">
                </el-option>
            </el-select>
        </el-form>
        <el-form :model="shelves">
            <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="shelves.person" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="shelves">
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="shelves.telephone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="shelves">
            <el-form-item label="主要商品" :label-width="formLabelWidth">
                <el-input v-model="shelves.mainProduct" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <!--<el-form :model="shelves">
            <el-form-item label="创建时间" :label-width="formLabelWidth">
                <el-input v-model="shelves.createTime" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>-->
        <el-form :model="shelves">
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-input v-model="shelves.status" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveShelves()">确 定</el-button>
        </div>
    </el-dialog>


</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                tableData: null,//表格数据
                total:0,//总页数
                current:1,//当前页数
                pageSize:10, //每页条数
                dialogFormVisible: false,//控制对话框的显示
                shelves:{
                    id:'',
                    shelvesNo:'',
                    wareId:'',
                    damId:'',
                    goodsName:'',
                    mainProduct:'',
                    totalNum:'',
                    /*creatTime:'',*/
                    status:'',
                    person:'',
                    telephone:''
                },
                options:{
                    goodsName:'',
                    id:''
                },
                options1:{
                    goodsNo:'',
                    damId:''
                },
                formInline:{ //模糊查询的数据
                    shelvesNo:"",
                    creatTime:"",
                },
                formLabelWidth:'120px'
            }
        },
        methods:{
            handleCommand(){
                this.$message('当前状态：'+this.status);
            },

            /*模糊查询*/
            onSubmit(){
                this.loadPage(1);
            },

            loadPage(current){ //表格显示的方法
                this.shelvesNo=this.formInline.shelvesNo;
                this.creatTime=this.formInline.creatTime;
                this.current=current;
                axios.get("/shelvesPage?current="+this.current+"&shelvesNo="+this.shelvesNo+"&creatTime="+this.creatTime)
                    .then(value => {
                        console.log(value);
                        if (value.data.code=1){
                            this.tableData=value.data.data.records;
                            this.total=value.data.data.total;
                            this.current=value.data.data.current;
                            this.pageSize=value.data.data.pageSize;
                        }
                    });
            },

            /*添加修改时下拉框显示页面*/
            showWareName(){
                axios.get("/shelvesIdByCargoAreaName").then(value => { //JSON上传数据
                    if(value.data.code == 1){
                        /*this.options=this.$message(value.data.msg);*/
                        this.options=value.data.data;

                    }
                });
            },
            /*添加修改时下拉框显示页面*/
            showWareName1(){
                axios.get("/shelvesIdByCargoAreaDamId").then(value => { //JSON上传数据
                    if(value.data.code == 1){
                        /*this.options=this.$message(value.data.msg);*/
                        console.log("下卡卡");
                        console.log( this.options1);

                        this.options1=value.data.data;

                    }
                });
            },

            //显示修改用户的对话框
            handleEdit(index, row) {
                this.showWareName();
                this.showWareName1();
                //使用JSON.parse和JSON.stringify可以将数据以JSON形式赋给当前对象
                this.shelves=JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
            },

            //显示添加用户的对话框
            openEdit() {
                //使用JSON.parse和JSON.stringify可以将数据以JSON形式赋给当前对象
                this.showWareName();
                this.showWareName1();
                this.dialogFormVisible=true;
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.deleteShelves(row.id);
            },

            saveShelves(){
                if(this.shelves.id==''){
                    axios.post("/shelves",this.shelves).then(value => { //JSON上传数据
                        if(value.data.code == 1){
                            this.loadPage(this.current);
                            this.$message(value.data.msg);
                        }
                    });
                }else{
                    axios.put("/shelves",this.shelves).then(value => {
                        if(value.data.code==1){
                            this.loadPage(this.current)
                            this.$message(value.data.msg);
                        }
                    });
                }
                this.dialogFormVisible=false;
            },
            closeMyDialog(){
                this.shelves={
                    id:'',
                    shelvesNo:'',
                    goodsName:'',
                    wareId:'',
                    damId:'',
                    mainProduct:'',
                    totalNum:'',
                    /*creatTime:'',*/
                    status:'',
                    person:'',
                    telephone:''
                }
            },
            deleteShelves(id){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示',"/shelves/{id}", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.delete("/shelves/"+id).then(value => {
                        console.log(id);
                        if (value.data.code == 1) {
                            this.loadPage(1);
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        mounted(){
            this.loadPage(1);
        }
    })


</script>
</html>